<template>
	<uni-popup class="pop" ref="popupRef" type="bottom" :animation="true">
		<view class="pop-content" :style="{ marginBottom: '-' + safeBottom + 'px'}" v-if="popupData">
			<view class="container-box">
				<text class="close" @click="closePop">×</text>
				<view class="image">
					<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(img, index) in getImageList" :key="index">
							<image :src="imageUrl + img" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y">
				<view class="introduce">
					<view v-if="popupData.name" class="title">
						{{popupData.name}}
					</view>
					<view v-if="popupData.scienc_name" class="title">
						{{popupData.scienc_name}}
					</view>
					<view v-if="popupData.desc" class="desc">
						{{popupData.desc}}
					</view>
					<view v-if="popupData.scenic_decr" class="desc">
						{{popupData.scenic_decr}}
					</view>
				</view>
				</scroll-view>
			
			</view>
	
			<view class="kongbai">
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { imageUrl } from '../../../../config/request/request';
	import {
		ref,
		computed
	} from 'vue';
	import {
		safeBottom
	} from '@/config/systemInfo.js'
	const data = ref([1, 2, 3, 4, 5, 6])
	const popupRef = ref(null);
	// 接收父组件传递的数据
	const props = defineProps({
		popupData: {
			type: Object,
			default: () => ({}),
		},
	});

	// 计算属性：处理图片列表
	const getImageList = computed(() => {
		if (!props.popupData) return [];
		const imgStr = props.popupData.scienc_img || props.popupData.img || '';
		return imgStr.split(',').filter(img => img.trim() !== '');
	});

	// 子组件方法
	const emits = defineEmits([])
	const closePop = () => {
		popupRef.value.close();
	}
	// 暴露方法给父组件
	const exposeMethods = {
		showPopup: () => {
			popupRef.value.open();
		},
		closePopup: () => {
			popupRef.value.close();
		}
	};
	defineExpose({
		...exposeMethods
	});
</script>

<style scoped>
	.pop-content {
		font-family: "仓耳渔阳体 W05";
		/* 添加样式 */
		background: #f5f6f7;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		/* padding: 86rpx 296rpx 80rpx 296rpx; */
		min-height: 70vh;
		max-height: 80vh;
	}

	.container-box {
		position: relative;
	}
	.container-box .close{
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		top: 10rpx;
		right: 20rpx;
		font-size: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #fff;
		z-index: 999;
		font-weight: bold;
	}
	.container-box .image{
		width: 100%;
	}
	.container-box .image .swiper{
		width: 100%;
		height: 600rpx;
	}
	.container-box .image .swiper image{
		width: 100%;
		height: 100%;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	.scroll-Y{
		
	    min-height: 30vh;
	    max-height: 40vh;
	}
	.introduce{
		margin: 40rpx 20rpx 0 20rpx;
	}
	.introduce .desc{
		margin-top: 2vh;
		font-size: 32rpx;
	}
	.introduce .title{
		font-weight: 600;
		font-size: 36rpx;
	}
	.kongbai {
		height: 20rpx;
	}
</style>